<template>
  <div id="results-title">
    <!-- 搜索出来的数量 -->
    <div class="number">
      搜索
      <div class="keywords">"{{ $route.query.keywords }}"</div>
      <span>，找到{{ count }}首单曲</span>
    </div>
    <!-- 标题 -->
    <div class="title">
      <div v-for="(item, index) in titles" :key="index">
        <div
          :class="{ 'title-item': true, 'is-active': index === currentIndex }"
          @click="titleClick(index)">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResultsTitle',
  props: {
    count: {
      type: Number,
      default () {
        return 0
      }
    },
    titles: {
      type: Array,
      default () {
        return []
      }
    },
    currentIndex: {
      type: Number,
      default () {
        return 0
      }
    }
  },
  methods: {
    // 1. 标题被点击
    titleClick (index) {
      this.$emit('titleClick', index)
    }
  }
}
</script>

<style scoped lang="less">
#results-title {
  user-select: none;
  .number {
    display: flex;
    padding: 30px;
    color: #333;
    font-size: 13px;
  }
  .keywords {
    color: #0c73c2;
  }
  .title {
    display: flex;
    // align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e1e1e2;
    .title-item {
      padding: 8px 5px ;
      padding-top: 0;
      margin: 0 30px;
      cursor: pointer;
      &.is-active {
        color: #c62f2f;
        border-bottom: 4px solid #c62f2f;
      }
    }
  }
}
</style>
